import { Button, Card, Modal, Tag, } from "antd"
import { useEffect } from "react"
import { useState } from "react"
import { useLocation, useNavigate } from "react-router-dom"
import { http } from "../../utils"
import '../student/index.scss'

const TestInCourse = () => {
  const { state: { res, id } } = useLocation()
  const [testList, setTestList] = useState([res])
  const navigate = useNavigate()
  const [isModalOpen, setIsModalOpen] = useState(false)
  const [typeList, setTypeList] = useState(checkType())
  const [loading, setLoading] = useState(true)
  const [score, setScore] = useState()
  const [isOpen, setIsOpen] = useState(false)
  const [showTest, setShowTest] = useState({
    description: "",
    end_time: "",
    id: null,
    name: "",
    start_time: "",
    status: null,
    subject_id: null,
    testTime: null
  })
  const showModal = (item) => {
    setShowTest(item)
    setIsModalOpen(true)
  }
  const handleOk = () => {
    setIsModalOpen(false)
    const selectTestId = showTest.id
    navigate('/exam', { state: { T: { selectTestId }, D: { id } } })
  }
  const handleCancel = () => {
    setIsModalOpen(false)
    setIsOpen(false)
  }
  function checkType () {
    const type = []
    res.testList.map((item, index) => {
      http.get(`/base_server/api/v1/pub/paper/answer/test_status${'?course_id='}${id.id}&${'test_paper_id='}${item.id}`)
        .then((res) => {
          type[index] = res.data
        })
    })
    // console.log(type)
    return type
  }
  setTimeout(() => {
    // console.log(typeList)
    setLoading(false)
  }, 3000)

  const seacher = (p) => {
    setShowTest(p)
    http.get(`/base_server/api/v1/pub/paper/answer/score${'?course_id='}${id.id}&${'test_paper_id='}${p.id}`)
      .then((res) => {
        console.log(res.data)
        setScore(res.data)
      }).then(() => {
        setIsOpen(true)
      })
  }
  useEffect(() => {
    // console.log(res)//课程内的试卷
    // console.log(id.id)//课程id
    setTestList(res.testList)

  }, [])// eslint-disable-line
  return (
    <div className="test-in-course">
      <div className="test-in-course-content">
        {testList.map((item, index) => {
          return (
            <Card
              title={item.name}
              style={{
                width: 300,
                marginRight: 50,
              }}
              key={index}
              loading={loading}

            >
              <p>考试科目:{item.subject_name}</p>
              <p>考试时长:{item.testTime}分钟</p>
              <p>考试状态:{item.status === 1 ? <Tag color="blue">进行中</Tag> : <Tag color="blue">已结束</Tag>}</p>
              <p>考试结束时间:{item.end_time}</p>
              <Tag color="blue"> {typeList[index] === true ? '已参加' : '未参加'}</Tag>
              <Button type="primary" disabled={typeList[index]} onClick={() => { showModal(item) }}>参加考试</Button>
              <Button onClick={() => { seacher(item) }}>查询成绩</Button>
            </Card>
          )
        })}
        <Modal title={showTest.name} open={isModalOpen} onOk={() => { handleOk() }} onCancel={handleCancel} width={800}>
          <p className="p-testInCourse">试卷说明: {showTest.description === null ? '暂无描述' : showTest.description}</p>
          <p className="p-testInCourse">考试科目: {showTest.subject_name}</p>
          <div className="modal-test">
            <p className="test-imp">注意: </p>
            <div className="p-testInCourse">
              <p >(1)考试过程中严禁使用任何书籍、计算器、手机以及带有记忆功能的电子设备；严禁佩戴耳机。</p>
              <p>(2)请提前退出包括但不仅限于微信、企业微信、邮箱等软件，避免消息弹窗导致考试相关告警。</p>
              <p>(3)考试过程中请勿使用第二屏幕或切屏离开作答界面, 无故切屏离开作答界面将引发疑似作弊告警。</p>
              <p>(4)请在封闭的私人空间中参加考试，并保持安静，不做与考试无关的事情，包括但不限于左顾右盼、交流讨论、接打电话、大声读题、饮食等。</p>
            </div>

          </div>
          <p className="p-testInCourse" >关于考试:考试开始时系统将自动开启倒计时，考试时间结束后系统将自动执行交卷。</p>
          <p className="p-testInCourse">关于结果:系统采用计算机自动阅卷的方式判定结果，考试结果仅提供给考试发起者，系统不对结果做任何形式的干预。</p>
          <p className="p-testInCourse">关于隐私:考生个人信息、考试结果、作答过程、IP 地址等，仅提供给考试发起者，未经考生本人同意，不向任何第三方透露。</p>
        </Modal>
        <Modal title="成绩查询" open={isOpen} onOk={handleCancel} onCancel={handleCancel}>
          <p>您在{showTest.name}考试中取得{score}分的好成绩</p>

        </Modal>
      </div>

    </div>
  )
}

export default TestInCourse